<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model.trim="form.number" size="small" style="width:140px;" placeholder="订单编码" @keyup.enter.native="searchBtn" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.type_no" size="small" style="width:140px;" placeholder="款号" @keyup.enter.native="searchBtn" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.type_name" size="small" style="width:140px;" placeholder="款名" @keyup.enter.native="searchBtn" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.creator" size="small" style="width:140px;" placeholder="创建人" @keyup.enter.native="searchBtn" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.state" placeholder="锁定状态" style="width: 100px;" size="small" clearable>
                        <el-option label="未锁定" :value=0></el-option>
                        <el-option label="已锁定" :value=1></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                    <el-button type="warning" class="el-icon-plus" size="small" @click="addBtn" :disabled="!nodeActions.includes('add')">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini" row-key="id" highlight-current-row>
                <el-table-column prop="state" label="锁定状态" width="90">
                    <template slot-scope="{row}">
                        <el-tag class="el-icon-lock" size="mini" v-if="row.state==1" type="danger">已锁定</el-tag>
                        <el-tag class="el-icon-unlock" size="mini" v-else-if="row.state==0" type="info">未锁定</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="订单类型" width="80">
                    <template slot-scope="{row}">
                        <el-tag size="mini" :type="(row.type>1 ? 'warning' : 'primary')">{{orderType[row.type]}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="运营订单编码" width="120"></el-table-column>
                <el-table-column prop="type_no" label="设计编码">
                    <template slot-scope="{row}">
                        <el-popover placement="right-start" width="400" trigger="click">
                            <div style="font-size: 12px;" class="product-number-box">
                                <el-row style="border-bottom: 1px solid #e8eaec;padding: 4px;">
                                    <el-col :span="3">序号</el-col>
                                    <el-col :span="8">设计编码</el-col>
                                    <el-col :span="13">设计名称</el-col>
                                </el-row>
                                <el-row class="el-row-data" v-for="(item, index) in row.export_order_product" :key="index" style="border-bottom: 1px solid #e8eaec;padding: 4px;">
                                    <el-col :span="3">{{index+1}}</el-col>
                                    <el-col :span="8">
                                        <a @click="linkTo(item.product_number)" class="el-icon-folder-opened" style="color: #409eff"></a>
                                        &nbsp;{{item.product_number}}
                                    </el-col>
                                    <el-col :span="13" class="ellipsis">{{item.product}}</el-col>
                                </el-row>
                            </div>
                            <div slot="reference" class="ellipsis" style="width: 100%;">
                                <span class="el-icon-folder-opened" v-for="(item, index) in row.export_order_product" :key="index" style="cursor:pointer;margin-right: 4px;">
                                    {{item.product_number}}
                                </span>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="count" label="数量" width="120"></el-table-column>
                <el-table-column prop="delivery_date" label="交期" width="120"></el-table-column>
                <el-table-column prop="comment" label="备注" show-overflow-tooltip></el-table-column>
                <el-table-column prop="creator" label="创建人" width="120"></el-table-column>
                <el-table-column prop="creation_time" label="创建时间" width="120"></el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                    <template slot-scope="{row}">
                        <el-button type="text" size="small" class="el-icon-folder-opened" @click="editBtn(row)">&nbsp;打开</el-button>
                        &nbsp;
                        <el-dropdown trigger="hover" style="font-size: 12px;" @command="actionBtn($event, row)">
                            <span style="cursor: pointer;color: #409EFF;">
                                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="LOCK" icon="el-icon-lock" :disabled="!(nodeActions.includes('lock') && row.state==0)">锁 定</el-dropdown-item>
                                <el-dropdown-item command="UNLOCK" icon="el-icon-unlock" :disabled="!(nodeActions.includes('unlock') && row.state==1)">解 锁</el-dropdown-item>
                                <el-dropdown-item command="DEL" icon="el-icon-delete" :disabled="!(nodeActions.includes('del') && row.state==0)">删 除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--新增、编辑-->
        <el-drawer :title="editTitle" :visible.sync="editVisible" size="1200px" direction="rtl" :wrapperClosable="false" :before-close="closeBtn">
            <el-row style="padding: 0 0 10px 0px">
                <div style="margin-bottom: 10px;padding-left: 10px;">
                    <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="20" height="20"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                    <span style="font-size: 18px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">运营订单编号：{{editForm.number}}</span>
                    <el-tag class="el-icon-lock" size="mini" v-if="editForm.state==1" type="danger" style="vertical-align: super;margin-left: 10px;">已锁定</el-tag>
                </div>
                <el-form inline label-position="right" label-width="90px">
                    <el-form-item label="交期：">
                        <el-date-picker v-model="editForm.delivery_date" type="date" placeholder="选择日期" size="small" :disabled="!isEdit"
                                        value-format="yyyy-MM-dd" style="width: 200px;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="数量：">
                        <span style="display:inline-block;width:120px;font-weight: bold">{{countTotal}}</span>
                    </el-form-item>
                    <el-form-item label="币种：">
                        <el-select v-model="editForm.currency_id" size="small" disabled style="width: 200px;">
                            <el-option :value=1 label="CNY"></el-option>
                            <el-option :value=2 label="USD"></el-option>
                            <el-option :value=3 label="EUR"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单类型：">
                        <el-select v-model="editForm.type" size="small" :disabled="!isEdit" style="width: 200px;">
                            <el-option v-for="(label, key) in orderType" :key="key" :value="Number(key)" :label="label"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注：">
                        <el-input type="textarea" placeholder="备注信息（必填）" :autosize="{minRows:2,maxRows:4}" v-model="editForm.comment" style="width: 400px;" :disabled="!isEdit"></el-input>
                    </el-form-item>
                </el-form>
                <el-tabs type="border-card" v-model="tab" class="export-tab-box">
                    <el-tab-pane label="数量配比" name="size">
                        <el-button type="primary" class="el-icon-search" size="small" plain style="margin: 5px 0 5px 5px"
                                   :disabled="!isEdit" @click="openStyleBtn">&nbsp;选择款式</el-button>
                        &nbsp;
                        <el-upload action="/api/tool/fileImport" :show-file-list="false" style="display: inline"
                                   :headers="uploadHeaders"
                                   :data="uploadData"
                                   :on-success="(res)=>uploadSuccessHandle(res)"
                                   :before-upload="beforeUpload">
                            <el-button :disabled="!(isEdit && nodeActions.includes('import'))" class="el-icon-upload2" type="primary" size="small" plain>
                                导入
                            </el-button>
                        </el-upload>&nbsp;
                        <el-button type="text" size="mini" @click="downloadFile('运营订单导入模板.xlsx')">
                            <svg style="vertical-align: sub;" t="1720518191914" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5101" width="20" height="20"><path d="M901.851653 926.484607a48.255937 48.255937 0 0 1-14.274541 34.442195 48.844737 48.844737 0 0 1-34.457555 14.279661H170.419644a48.220097 48.220097 0 0 1-34.457555-14.279661 48.844737 48.844737 0 0 1-14.279662-34.442195V48.846068a48.317377 48.317377 0 0 1 14.279662-34.467795A48.844737 48.844737 0 0 1 170.419644 0.001331h418.800096a48.742337 48.742337 0 0 1 34.662355 14.131182l263.858857 263.910057a48.844737 48.844737 0 0 1 14.110701 34.667475z" fill="#EBECF0" p-id="5102"></path><path d="M901.851653 926.484607v48.767936a48.317377 48.317377 0 0 1-14.274541 34.467796 48.844737 48.844737 0 0 1-34.457555 14.279661H170.419644a48.844737 48.844737 0 0 1-48.788417-48.844737v-48.721856a48.204737 48.204737 0 0 0 14.279662 34.442195 48.844737 48.844737 0 0 0 34.457555 14.279661h682.648713a48.844737 48.844737 0 0 0 48.773056-48.783296z" fill="#C1C7D0" p-id="5103"></path><path d="M24.167034 536.423034h975.153932v243.849923a48.921536 48.921536 0 0 1-48.721856 48.844736H73.011771a48.342977 48.342977 0 0 1-34.467796-14.274541 48.844737 48.844737 0 0 1-14.376941-34.570195z" fill="#0AC905" p-id="5104"></path><path d="M121.733627 536.412794V438.856441L24.167034 536.412794z m780.118026 0l0.926719-97.556353 97.039234 97.556353z" fill="#168E2D" p-id="5105"></path><path d="M901.851653 312.628125v6.860791h-263.833257a48.844737 48.844737 0 0 1-48.844736-48.844737V0.001331a48.732097 48.732097 0 0 1 34.662355 14.115822l264.268456 263.751337a49.459136 49.459136 0 0 1 13.701102 34.754515z" fill="#C1C7D0" p-id="5106"></path><path d="M265.190721 764.037458H136.346088v-153.94284h126.335836v35.978193H187.382182v21.749732h63.590317v35.973073h-63.590317v24.268769h77.808539zM358.05716 720.532875l-25.098207 43.504583H276.065587l54.384569-80.322456-49.366976-73.620384h56.893366l21.754852 39.321549 22.589411-39.321549h56.888246L386.508963 683.725242l52.705212 80.317336H382.320809zM599.843726 668.662222h-47.682498q-3.353596-24.268768-27.612124-25.103327-27.612124 0.839679-28.446683 45.178821 0 41.845706 30.120921 41.830345 22.584291 0 25.937886-25.932766h48.522177q-8.376309 59.417523-73.625505 61.91096-78.648218-2.508797-81.151894-79.482777 4.177915-76.124061 76.96886-81.151894 69.43735 0.839679 76.96886 62.750638zM752.112328 764.037458h-128.844633v-153.94284h126.335836v35.978193H674.303789v21.749732h63.590317v35.973073H674.303789v24.268769h77.808539zM897.694219 764.037458H777.215655v-153.94284h51.036094v117.964647h69.44247z" fill="#FFFFFF" p-id="5107"></path></svg>
                            导入模板
                        </el-button>
                        <el-table v-if="detailList.length>0" :data="detailList" style="width: 100%" :max-height="drawerTableHeight" v-loading="loading"
                                  class="detail-table-box" size="mini" row-key="product_colour.id" highlight-current-row :header-cell-style="headerCellStyle"
                                  :summary-method="getSummaries" show-summary>
                            <el-table-column label="删除" width="45" v-if="isEdit" fixed>
                                <template slot-scope="scope">
                                    <el-button size="small" class="el-icon-delete" type="text" @click="delBtn(scope.$index)"></el-button>
                                </template>
                            </el-table-column>
                            <!--                    <el-table-column label="批次" width="80" fixed>-->
                            <!--                        <template slot-scope="{row}">-->
                            <!--                            {{row.item.customer_purchase_order_number}}-->
                            <!--                        </template>-->
                            <!--                    </el-table-column>-->
                            <el-table-column label="图片" width="50" fixed>
                                <template slot-scope="{row}">
                                    <el-image v-if="row.img" :src="row.img" :preview-src-list="[row.img]" style="height: 30px;" fit="contain"></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="product_number" label="款号" width="90" fixed></el-table-column>
                            <el-table-column prop="product" label="款名" width="90" show-overflow-tooltip fixed></el-table-column>
                            <el-table-column label="款式颜色" width="90" show-overflow-tooltip fixed>
                                <template slot-scope="{row}">
                            <span style="display:inline-block;width:16px;height:16px;vertical-align: text-bottom;"
                                  :style="{'background-color': getColor(row.product_colour.colour_value)}"></span>
                                    {{row.product_colour.colour}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="product_detail_category" label="设计分类" width="80" show-overflow-tooltip fixed></el-table-column>
                            <!--                    <el-table-column label="内部交期" width="100" fixed>-->
                            <!--                        <template slot-scope="{row}">-->
                            <!--                            <el-date-picker v-if="isEdit" class="delivery-date-item" v-model="editForm.detail_list[0].item.delivery_date"-->
                            <!--                                            type="date" size="mini" :readonly="!isEdit" value-format="yyyy-MM-dd"></el-date-picker>-->
                            <!--                            <span v-else>{{row.item.delivery_date ? row.item.delivery_date : ""}}</span>-->
                            <!--                        </template>-->
                            <!--                    </el-table-column>-->
                            <!--                    <el-table-column label="下单日期" width="82" fixed>-->
                            <!--                        <template slot-scope="{row}">{{row.item.customer_purchase_order_date}}</template>-->
                            <!--                    </el-table-column>-->
                            <!--                    <el-table-column label="备注" width="80" show-overflow-tooltip fixed>-->
                            <!--                        <template slot-scope="{row}">-->
                            <!--                            <el-input v-if="isEdit" class="size-count-item" v-model.trim="row.item.comment" size="small" :readonly="!isEdit"></el-input>-->
                            <!--                            <span v-else>{{row.item.comment}}</span>-->
                            <!--                        </template>-->
                            <!--                    </el-table-column>-->
                            <!--尺码-->
                            <el-table-column v-for="(item, index) in sizeList" :key="index" :label="item.size" min-width="90">
                                <template scope="{ row }">
                                    <el-input v-if="row.count[item.size] && isEdit" class="size-count-item" v-model.trim="row.count[item.size].count" size="mini" type="number"
                                              :readonly="!isEdit" :min="0" placeholder="0"></el-input>
                                    <span v-else :style="{color: row.count[item.size] && row.count[item.size].count > 0 ? 'none' : '#c0c4cc'}">
                                        {{row.count[item.size] ? (row.count[item.size].count ? row.count[item.size].count : 0) : "-"}}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column label="汇总" width="70" fixed="right">
                                <template scope="{ row }">{{row.count | countRowTotal}}</template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="日志" name="log" style="padding: 10px">
                        <el-table :data="logData" :max-height="drawerTableHeight" stripe size="mini" v-loading="logLoading">
                            <el-table-column prop="username" label="姓名"></el-table-column>
                            <el-table-column prop="content" label="操作内容"></el-table-column>
                            <el-table-column prop="createtime" label="操作时间"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-row>
            <div style="width: 100%;position: absolute;bottom: 10px;padding: 8px;border-top: 1px #ebeef5 solid;">
                <el-button @click="closeBtn">退 出</el-button>
                <el-button type="primary" v-if="isEdit" @click="saveBtn" :loading="saveLoading" :disabled="detailList.length==0">
                    {{ saveLoading ? '提交中 ...' : '保 存' }}
                </el-button>
            </div>
        </el-drawer>

        <!--选择款式-->
        <el-dialog title="选择款式颜色" :visible.sync="styleVisible" top="10px" :close-on-click-modal="false" width="900px">
            <el-row>
                <el-form inline>
                    <el-form-item>
                        <el-input v-model.trim="styleForm.number" size="small" style="width:140px;" placeholder="款号" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model.trim="styleForm.name" size="small" style="width:140px;" placeholder="款名" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model.trim="styleForm.t17_number" size="small" style="width:140px;" placeholder="套装编码" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="el-icon-search" @click="searchStyleBtn" size="small" :loading="btnLoading">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="styleData" style="width: 100%" max-height="400px" v-loading="btnLoading" size="mini" @selection-change="selectedHander">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="number" label="款号"></el-table-column>
                    <el-table-column prop="name" label="款名" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="colour" label="颜色">
                        <template slot-scope="{row}">
                            <span style="display:inline-block;width:16px;height:16px;vertical-align: text-bottom;"
                                  :style="{'background-color': getColor(row.style_colour.colour_value)}"></span>
                            {{row.style_colour.colour}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="t17_number" label="套装编码"></el-table-column>
                </el-table>
                <!--翻页栏-->
                <div style="margin-top: 4px;overflow: hidden;float: right;">
                    <Page :total="styleTotal" :current="stylePage" :page-size="styleLimit" show-total @on-change="pageStyleChange"></Page>
                </div>
            </el-row>
            <div slot="footer">
                <el-button @click="styleVisible=false;" size="small" plain>取 消</el-button>
                <el-button type="primary" @click="styleSaveBtn" size="small" :loading="saveLoading" :disabled="selectedData.length==0">确 定</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>

import {exportDel, exportDetail, exportList, exportLock, exportSave, exportStyleList} from "../../api/om/export";
import {getColor, sizeSort} from "../../libs/tools";
import {operateList} from "../../api/log/log";
import {getToken} from "../../libs/util";

export default {
    name: "om_export",
    data() {
        return {
            getColor,
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 30,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            tab:'size',
            drawerTableHeight: window.innerHeight - 380+"px",
            form:{number: "", type_no:"", type_name:"", creator: "", state:""},

            saveLoading: false,
            editTitle: "",
            editVisible: false,
            editForm:{},
            detailList: [],
            sizeList: [],
            isEdit: 0,
            orderType: {1 : "首单", 2 : "翻单"},

            deleteData: [],
            selectedData: [],
            styleData: [],
            styleVisible: false,
            styleForm: {number: "", t17_number: "", name: ""},
            stylePage: 1,
            styleLimit: 30,
            styleTotal: 0,

            logData: [],
            logLoading: false,

            uploadHeaders: {},
            uploadData:{type: 'om_export', disk: 'excel'},
        }
    },
    computed:{
        countTotal(){
            let detailList = [];
            let countTotal = 0;
            if(this.detailList && this.detailList.length > 0){
                detailList = this.detailList;
                detailList.forEach(item =>{
                    for (var size in item.count) {
                        countTotal += Number(item.count[size]['count']);
                    }
                });
            }
            return countTotal;
        },
    },
    filters: {
        countRowTotal(list) {
            let total = 0;
            for(let k in list){
                total += Number(list[k].count);
            }
            return total;
        },
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{
        tab(name){
            if(name == 'log'){
                this.getLogData();
            }
        },
    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit
            };
            param = Object.assign(param, this.form);
            this.loading = true;
            this.btnLoading = true;
            exportList(param).then((res) => {
                this.loading = false;
                this.btnLoading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
                this.btnLoading = false;
            });
        },
        //操作日志
        getLogData() {
            let param = {
                page: 1,
                limit: 20,
                type: 1,
                type_no: this.editForm.number
            };
            this.logData = [];
            this.logLoading = true;
            operateList(param).then((res) => {
                this.logLoading = false;
                this.logData = res.data.data;
            }).catch(() => {
                this.logLoading = false;
            });
        },
        //跳转
        linkTo(val){
            this.$router.push({
                name: "pages_designEd",
                params: {id: val, isEdit: 0}
            });
        },
        headerCellStyle(row) {
            for(let i in this.sizeList){
                if(this.sizeList[i].size == row.column.label){
                    return {color: "#409EFF"};
                }
            }
        },
        //合计
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            const labels = this.sizeList.map((item) => item.size);
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计";
                    return;
                }
                const values = data.map((item) => item.count[column.label] ? Number(item.count[column.label]['count']) : 0 );
                if (!values.every((value) => isNaN(value)) && (labels.includes(column.label))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] = sums[index];
                } else if(column.label == '汇总'){
                    sums[index] = this.countTotal;
                }else {
                    sums[index] = "";
                }
            });
            return sums;
        },
        //更多操作
        actionBtn(command, row){
            switch (command){
                case "LOCK":
                case "UNLOCK":
                    let msg  = command == "LOCK" ? `【锁定】订单：${row.number}, 是否确认` : `【解锁】订单：${row.number}, 是否确认`;
                    let state = command == "LOCK" ? 1 : 0;
                    this.$confirm(msg, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        this.loading = true;
                        exportLock({id: row.id, state: state}).then((res) =>{
                            this.loading = false;
                            if(res.code === 0){
                                this.$message.success(state == 1 ? "锁定成功" : "解锁成功");
                                this.getData();
                            }else{
                                this.$message.error(res.msg);
                            }
                        }).catch(() =>{
                            this.loading = false;
                        })
                    }).catch(() => {

                    });
                    break;
                case "DEL":
                    this.$confirm(`【删除】订单：${row.number}, 是否确认`, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        this.loading = true;
                        exportDel({id: row.id}).then((res) =>{
                            this.loading = false;
                            if(res.code === 0){
                                this.$message.success("删除成功");
                                this.getData();
                            }else{
                                this.$message.error(res.msg);
                            }
                        }).catch(() =>{
                            this.loading = false;
                        })
                    }).catch(() => {

                    });
                    break;
            }
        },
        closeBtn(){
            this.isEdit = 0;
            this.editVisible = false;
            this.editForm = {};
            this.detailList = [];
            this.sizeList = [];
        },
        addBtn(){
            this.editVisible = true;
            this.editTitle = "运营订单：新增";
            this.editForm = {delivery_date: "", currency_id: 1, type: 1, comment: ""};
            this.detailList = [];
            this.sizeList = [];
            this.isEdit = 1;
        },
        editBtn(row){
            this.loading = true;
            exportDetail({id: row.id}).then((res) =>{
                this.editTitle = res.data.state == 0 && this.nodeActions.includes("edit") ? "运营订单：编辑" : "运营订单：查看";
                this.isEdit = res.data.state == 0 && this.nodeActions.includes("edit") ? 1 : 0;
                this.loading = false;
                this.editForm = res.data;
                this.detailList = res.data.detail_list;
                this.sizeList = res.data.size_position;
                this.editVisible = true;
                delete this.editForm['detail_list'];
                delete this.editForm['size_position'];
            }).catch(()=>{
                this.loading = false;
            });
        },

        //下载
        downloadFile(name){
            window.open('/api/tool/fileExport'+`?path=template&type=file&name=${name}`, '_self');
        },
        uploadSuccessHandle(res){
            if(res.code === 0){
                this.selectedData = res.data;
                this.styleSaveBtn();
            }else{
                this.$message.error(res.msg);
            }
        },
        beforeUpload(file) {
            if(!/\.xlsx/.test(file.name)){
                this.$message.error('上传文件只能是 xlsx格式, 请下载导入示例模板!');
                return false;
            }
            this.uploadHeaders.Authorization = 'Bearer '+ getToken();
            return true;
        },

        openStyleBtn(){
            this.styleVisible = true;
        },
        //搜索按钮
        searchStyleBtn() {
            this.stylePage = 1;
            this.getStyleData();
        },
        //翻页
        pageStyleChange(page) {
            this.stylePage = page;
            this.getStyleData();
        },
        //获取款式颜色
        getStyleData(){
            let param = {
                page: this.stylePage,
                limit: this.styleLimit
            };
            param = Object.assign(param, this.styleForm);
            param.is_subject = this.user.is_subject;
            this.btnLoading = true;
            exportStyleList(param).then((res) =>{
                this.btnLoading = false;
                this.styleTotal = res.data.total;
                this.styleData = res.data.data;
            }).catch(() => {
                this.btnLoading = false;
            });
        },
        selectedHander(list){
            this.selectedData = list;
        },
        styleSaveBtn(){
            let sizeList = [];
            let sizeMap = {};
            this.sizeList.forEach(sizeObj => {
                sizeList.push(sizeObj.size);
                sizeMap[sizeObj.size] = sizeObj;
            });
            this.selectedData.forEach(item => {
                let flag = 0;//款式颜色存在标识
                let sizeTempMap = {};
                //遍历尺码
                item.style_size.forEach(styleSize => {
                    if(!sizeList.includes(styleSize.size)){
                        sizeList.push(styleSize.size);
                    }
                    let sizeObj = {
                        count: styleSize.count ? styleSize.count : "",
                        product_size: {
                            size: styleSize.size,
                            size_number: styleSize.size_number,
                            size_id: styleSize.id
                        }
                    };
                    sizeTempMap[styleSize.size] = sizeObj;
                    //添加存在的款号颜色尺码
                    this.detailList.forEach((detail, index) => {
                        if(item.number == detail.product_number && item.style_colour.id == detail.product_colour.colour_id){
                            flag = 1;
                            if(!detail.count[styleSize.size]){
                                this.$set(this.detailList[index]['count'], styleSize.size, sizeObj);
                            }
                        }
                    });
                });
                //新增不存在的款号颜色尺码
                if(flag == 0){
                    let position = this.detailList.length > 0 ? this.detailList[this.detailList.length -1]['colour_position']['position'] : 0;
                    let itemObj =  this.detailList.length > 0 ? this.detailList[this.detailList.length -1]['item'] : {};
                    this.detailList.push({
                        colour_position: {position : position+1},
                        count: sizeTempMap,
                        img: item.img,
                        item: itemObj,
                        product: item.name,
                        product_category: item.product_category,
                        product_category_id: item.product_category_id,
                        product_colour: {
                            colour: item.style_colour.colour,
                            colour_id: item.style_colour.id,
                            colour_number: item.style_colour.colour_number,
                            colour_value: item.style_colour.colour_value,
                        },
                        product_detail_category: item.detail_category,
                        product_detail_category_id: item.detail_category_id,
                        product_id: item.id,
                        product_number: item.number,
                        t17_id: item.t17_id
                    });
                }
            });
            //新增尺码序列
            sizeList = sizeSort(sizeList);
            let position = 0;
            this.sizeList = [];
            sizeList.forEach(size => {
                position += 1;
                let obj = sizeMap[size] ? sizeMap[size] : {position: position, size:size};
                obj.position = position;
                this.sizeList.push(obj);
            });
            this.styleVisible = false;
            console.log(this.detailList, this.sizeList)
        },
        delBtn(index){
            if(this.detailList[index]['id']){
                this.deleteData.push(this.detailList[index]['id']);
            }
            this.detailList.splice(index, 1);
            if(this.detailList.length == 0){
                this.sizeList = [];
                return;
            }
            let sizeList = [];
            this.detailList.forEach(item =>{
                sizeList = sizeList.concat(Object.keys(item.count));
            });
            sizeList = Array.from(new Set(sizeList));
            let newSizeList = [];
            this.sizeList.forEach(item => {
                if(sizeList.includes(item.size)){
                    newSizeList.push(item);
                }
            });
            this.sizeList = newSizeList;
        },
        saveBtn(){
            let count = 0;
            this.detailList.forEach(item => {
                for(let key in item.count){
                    count += Number(item.count[key].count);
                }
            });
            if(count <= 0){
                this.$message.warning("保存异常：款式颜色下单数汇总：0");return;
            }
            if(!this.editForm.comment){
                this.$message.warning("保存失败：备注信息不能为空");return;
            }
            this.editForm.count = this.countTotal;
            this.editForm.real_count = this.editForm.count;
            this.saveLoading = true;
            let obj = {
                export_order: JSON.stringify(this.editForm),
                detail_list: JSON.stringify(this.detailList),
                size_list: JSON.stringify(this.sizeList),
                delete_product_ids: JSON.stringify(this.deleteData)
            };
            exportSave(obj).then((res) =>{
                this.saveLoading = false;
                if(res.code === 0){
                    this.$message.success("保存成功");
                    this.closeBtn();
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(() =>{
                this.saveLoading = false;
            })
        },
    },
    mounted() {
        this.searchBtn();
    }
}
</script>

<style scoped>
.ellipsis {
    overflow: hidden; /* 确保超出容器的内容被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.el-image /deep/ .el-icon-circle-close:before{
    color: white;
}
.product-number-box .el-row-data:hover{
    background-color: #e9f2fb;
}
.detail-table-box /deep/ .size-count-item .el-input__inner {
    padding: 0 !important;
}
.detail-table-box /deep/ .el-input__inner {
    border: none !important;
}
/*交期css*/
.delivery-date-item /deep/ .el-input__prefix{
    left: 1px;
}
.delivery-date-item /deep/ .el-input__inner{
    padding-left: 21px;
}

/* 解决有合计行时，横向滚动条在左侧、右侧固定列中无法选中问题*/
/deep/ .el-table__fixed, /deep/ .el-table__fixed-right{
    pointer-events: none;
}
/deep/ .el-table__fixed >*, /deep/ .el-table__fixed-right >*{
    pointer-events: all;
}

/*弹窗图片，遮罩层 层级bug*/
/deep/ .el-table__fixed-body-wrapper{
    z-index: unset;
}

.export-tab-box{
    margin-top: 10px;
}
.export-tab-box /deep/ .el-tabs__content{
    padding: unset;
}
</style>
